<template>
	<view class="container">
		<page-header title="客服列表" subtitle="管理和配置所有客服账号"></page-header>
		<view class="card">
			<CustomerServiceList />
		</view>
	</view>
</template>

<script>
	import CustomerServiceList from '../../components/CustomerServiceList.vue';
	import PageHeader from '../../components/PageHeader.vue';
	
	export default {
		components: {
			CustomerServiceList,
			PageHeader
		},
		onPullDownRefresh() {
			// 获取子组件实例
			const listComponent = this.$children.find(child => child.$options.name === 'CustomerServiceList');
			if (listComponent && listComponent.loadServiceList) {
				listComponent.loadServiceList().then(() => {
					uni.stopPullDownRefresh();
				}).catch(() => {
					uni.stopPullDownRefresh();
				});
			} else {
				uni.stopPullDownRefresh();
			}
		}
	}
</script>

<style>
	.container {
		padding: 32px;
		background-color: #f5f7fa;
		min-height: 100vh;
		box-sizing: border-box;
		transition: padding 0.2s;
	}
	.card {
		background: #fff;
		border-radius: 12px;
		box-shadow: 0 2px 8px rgba(63,81,181,0.04);
		padding: 24px;
		margin-bottom: 24px;
	}
	@media screen and (max-width: 900px) {
		.container {
			padding: 12px;
		}
		.card {
			padding: 12px;
			border-radius: 8px;
		}
	}
	@media screen and (max-width: 500px) {
		.container {
			padding: 4px;
		}
		.card {
			padding: 6px;
			border-radius: 6px;
		}
	}
</style> 